<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${course['courseName']}+' - 直播详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
    <link th:href="@{{path}/common/v3/cssfont/myFonts/myFonts.css?v={v}(path=${staticPath},v=${v})}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div data-th-replace="layout/common-hade-one"></div>
<div style="display: none;">
    <input type="hidden" id="courseId" th:value="${course['id']}"/>
    <input type="hidden" id="courseType" th:value="${course['courseTypeKey']}"/>
    <input type="hidden" id="contextStatus" th:value="${course['contextStatus']}"/>
    <input type="hidden" id="subjectIds" th:value="${course['subjectIds']}"/>
    <input type="hidden" id="price" th:value="${course['realPrice']}"/>
    <input type="hidden" id="buyCourse" th:value="${course['courseBuyStatus']['buy']}"/>
    <input type="hidden" id="mobilePath" th:value="${mobilePath}"/>
</div>
<div class="cm-bg-20">
    <div class="live-course-info__wrap">
        <div class="container">
            <ol class="breadcrumb mt20">
                <li><a href="/" class="c-ccc">首页</a></li>
                <li><a th:href="@{/web/course/liveIndex}" class="c-ccc">直播课程</a></li>
                <li class="active c-ccc">直播详情</li>
            </ol>
            <div class="mt20">
                <div class="live-imgTxtAttr-free">
                    <section class="live-imgLeft-free">
                        <div class="live-imgLeft-bx">
                            <aside class="c-banner-cover-video l-banner-cover-video">
                                <a href="javascript:void(0)">
                                    <button class="btn btn-lg btn-rounded play-btn" type="button" th:attrappend="data-course-id=${course['id']}">
                                        <i class="fa fa-play mr10"></i>  进入直播间
                                    </button>
                                </a>
                            </aside>
                            <img class="c-img-left lazy" th:attr="data-original=!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['pcUrlMap'])} and !${#strings.isEmpty(course['imageMap']['pcUrlMap']['large'])}? ${course['imageMap']['pcUrlMap']['large']}:''" width="516" height="288"/>
                        </div>
                    </section>
                    <section class="course-txtAttr-free">
                        <h4 class="c-page-title">
                            <span class="fs20 c-fff vam show txtOf" th:text="${course['courseName']}"></span>
                        </h4>
                        <section class="pt10">
                            <span class="fs14 c-ccc show txtOf" th:text="${course['summary']}"></span>
                        </section>
                        <section class="pt10 mt5">
                            <span class="fs24 c-price" th:text="${course['realPrice']}>0? '￥'+ ${course['realPrice']}:'免费'"></span>
                            <span class="fs14 ml5 pl10 prime-cost" th:text="${course['orPrice']}>0? '￥' + ${course['orPrice']}:''"></span>
                            <button disabled th:if="!${#maps.isEmpty(course['liveCourseCatalog'])}" class="btn-living">
                                <i class="live-telecast-ico vam"></i>
                                <span class="c-price ml5 fs14">直播时间：
                                    <th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],11,16)}"></th:block>
                                    -
                                    <th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonEndTime'],11,16)}"></th:block>
                                </span>
                                <span class="pull-right fs12 t-watching">
                                    共<th:block th:text="${course['initBuyNum']}+${course['courseProfile']['buyCount']}"></th:block>人参加
                                </span>
                            </button>
                        </section>
                        <section class="mt5 pt10">
                            <span class="fs14 c-fff">讲师：</span>
                            <a th:each="teacher : ${course['teacherList']}" th:attrappend="data-original-title=${teacher['teacherName']}" class="ml10 c-danger" data-placement="top" data-toggle="tooltip" th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${teacher['id']})}">
                                <img class="img-circle lazy-user" height="34" width="34" th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}" th:alt="${teacher['teacherName']}" style="display: inline;">
                            </a>
                        </section>
                        <section class="mt20">
                            <aside th:if="${course['courseBuyStatus']['memberPriceBut']} or ${course['courseBuyStatus']['memberFreePriceBut']}" class="pull-right">
                                <a th:href="@{/web/uc/member/queryMemberList}">
                                    <button class="btn btn-sm btn-outline btn-warning" type="button">
                                        <i class="fa fa-tag mr5"></i> 加入会员享受会员价：
                                        <span  th:if="${course['courseBuyStatus']['memberPriceBut']}" th:text="${course['memberPrice']}"></span>
                                        <span th:if="${course['courseBuyStatus']['memberFreePriceBut']}">免费</span>
                                    </button>
                                </a>
                            </aside>
                            <span class="c-fff">课时：</span>
                            <span class="ml10 c-fff">共<th:block th:text="${course['nodeNum']}"></th:block>节</span>
                        </section>
                        <div class="mt20 pt10 clearfix">
                            <div class="cm-buy-group pull-left">

                                <button th:if="${course['courseBuyStatus']['buy']}" th:attrappend="data-course-id=${course['id']}" class="btn play-btn btn-rounded btn-enter-living btn-play">
                                    <span class="fs16">立即学习</span>
                                </button>

                                <a  class="ml20" th:href="${serviceMap['type']}==2?'tel:'+${serviceMap['context']}:${serviceMap['context']}">
                                    <button type="button" class="btn btn-warning btn-outline btn-rounded fs16 btn-play">课程咨询</button>
                                </a>
                                <th:block th:if="!(${course['status']}==2  or ${course['status']}==3 )">
                                    <button th:attrappend="data-course-id=${course['id']}" id="pay-course" th:if="!${course['courseBuyStatus']['buy']} and (${course['courseBuyStatus']['buyBut']} or ${course['courseBuyStatus']['memberBut']})" class="btn  btn-rounded btn-enter-living btn-play">
                                        <span class="fs16" th:if="${course['courseBuyStatus']['buyBut']}" data-type="1">立即报名</span>
                                        <span class="fs16" th:if="${course['courseBuyStatus']['memberBut']} and !${course['courseBuyStatus']['buyBut']}" data-type="2">开通会员</span>
                                    </button>
                                    <button th:if="!${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['freeBuyBut']}" th:attrappend="data-course-id=${course['id']},data-pay-type=${course['courseBuyStatus']['payType']}" class="btn free-play-btn btn-rounded btn-enter-living btn-play free-bm-box">
                                        <span class="fs16">免费报名</span>
                                    </button>
                                </th:block>
                                <th:block th:if="(${course['status']}==2  or ${course['status']}==3 ) and !${course['courseBuyStatus']['buy']} ">
                                    <button th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" id="abandoned" class="btn  btn-rounded btn-enter-living btn-play">
                                        <span class="fs16" >课程已下架</span>
                                    </button>
                                </th:block>
                            </div>
                            <section class="clearfix text-right">
                                <aside class="pull-right ml20 pt10 mt5">
                                    <a href="javascript:void(0)" id="QRCodeInp" class="c-999" data-container="body" data-trigger="hover" data-html="true" data-toggle="popover" data-placement="left" data-content="<img src='https://fimage.268xue.com/upload/0/yzl/common/2018101111/f325a9ff3176c322e7a79472c34b30c9.jpg' width='140' height='140' style='width:140px;height:140px;' />">
                                        <i class="fa fa-qrcode fs16 mr5 vam"></i>扫一扫学习
                                    </a>
                                </aside>
                                <aside class="pull-right ml20 pt10 mt5" data-share>
                                    <a href="javascript:void(0)" th:attr="data-mobile=${mobilePath}+${mobilePathShare},data-share=!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['pcUrlMap'])} and !${#strings.isEmpty(course['imageMap']['pcUrlMap']['large'])}? ${course['imageMap']['pcUrlMap']['large']}:''" class="c-999 oShareBtn"><i class="myIconfont icon-fenxiang mr5 vam"></i><span class="vam">分享</span></a>
                                </aside>
                                <!--收藏功能暂时没有完善,后期开发,勿删
                                <aside class="pull-right ml20 pt10 mt5">
                                    <a href="javascript:void(0)" class="c-999" id="favorites-course" title="收藏"><i class="fa fa-star-o mr5"></i>收藏</a>
                                </aside>-->
                                <aside th:if="${course['courseBuyStatus']['addCartBut']}" class="pull-right ml20 pt10 mt5" id="buy-but-box">
                                    <a href="javascript:void(0)" th:attrappend="data-s-id=${course['id']}" data-type="COURSE" data-num="1" class="c-999 a-s-c-d">
                                        <i class="fa fa-shopping-cart fs16 mr5 vam"></i><span class="vam">加入购物车</span>
                                    </a>
                                </aside>
                            </section>
                        </div>
                    </section>
                </div>
            </div>
            <div class="mt20">
                <div class="cm-attr-alert">
                    <div class="alert alert-info" style="background-color: transparent">
                        <div class="pt10 pb10 ml20 mr20">
                            <div class="row">
                                <section class="col-sm-4">
                                    <section class="hLh20 txtOf" id="activityList">
                                        <span class="label label-primary fs12 mr5 pull-left">活动</span>
                                        <span class="c-999 fs12 pull-left" id="activity-context-box">暂无活动</span>
                                    </section>
                                </section>
                                <section class="col-sm-4">
                                    <section class="hLh20 txtOf">
                                        <span class="label label-warning fs12 mr5 pull-left">服务</span>
                                        <span class="c-999 fs12 pull-left" th:text="${course['courseService']}">48小时答疑  / 作业批改</span>
                                    </section>
                                </section>
                                <section class="col-sm-4">
                                    <section class="hLh20">
                                        <span class="label label-danger fs12 mr5 pull-left">优惠</span>
                                        <span class="c-999 fs12 pull-left">学习更轻松，快来领取优惠券吧！</span>
                                        <aside class="pull-left dropdown ml10">
                                            <a href="javascript:;" id="show-receive-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle fs12 c-danger"> 点击领取 <span class="caret"></span></a>
                                            <div class="dropdown-menu dropdown-box" style="left: inherit;right: 0;">
                                                <ul class="opCard-item__wrap" id="course-coupon-list">
                                                </ul>
                                            </div>
                                        </aside>
                                    </section>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mb20 pb10">
    <div class="container">
        <div class="mt20 mb20 pb10">
            <div class="row mt20 pt10">
                <div class="col-sm-9">
                    <section class="c-info-tab">
                        <h4 data-tab="details"><span class="fs16 c-333">介绍</span></h4>
                        <h4 class="active" data-tab="catalogs"><span class="fs16 c-333">目录</span></h4>
                        <h4 data-tab="comments"><span class="fs16 c-333">评价</span></h4>
                    </section>
                    <div class="c-cont__wrap">
                        <!--介绍 开始-->
                        <article class="hide" data-tab="details">
                            <section th:if="${#strings.isEmpty(course['details'])}" class="no-data__wrap">
                                <span class="no-data-ico"></span>
                                <p class="mt20"><span class="c-666">暂无详情介绍~~</span></p>
                            </section>
                            <section th:if="!${#strings.isEmpty(course['details'])}">
                                <div class="mt20 pt10 mr20 ml10" th:utext="${course['details']}"></div>
                            </section>
                        </article>
                        <!--介绍 结束-->
                        <!--目录 开始-->
                        <article data-tab="catalogs" id="course-catalog-box">

                        </article>
                        <!--目录 结束-->
                        <!--评论 开始-->
                        <article class="hide" data-tab="comments" id="comment-container"></article>
                        <!--评论 结束-->
                    </div>
                </div>
                <div class="col-sm-3">
                    <!--预约过的人 开始-->
                    <div>
                        <section class="c-head-title">
                            <h6><span class="fs16 c-333" th:title="最近参加直播的人">参加直播的人</span></h6>
                            <hr>
                        </section>
                        <div class="mt10">
                            <div class="carousel slide carousel-class-member__wrap">
                                <div class="carousel-inner">
                                    <div class="item active bespeak-item" id="carousel-class-member">
                                        <span class="no-data__wrap">
                                            <span class="no-data-ico"></span>
                                            <p class="mt20"><span class="c-666">还没有参加直播的人~~~</span></p>
                                        </span>

                                    </div>
                                </div>
                                <a data-placement="top" data-toggle="tooltip" data-original-title="上一组" id="prevPage" data-slide="prev" href="javascript:void(0)" class="left carousel-control">
                                    <span class="fa fa-chevron-left"></span>
                                </a>
                                <a data-placement="top" data-toggle="tooltip" data-original-title="下一组" id="nextPage" data-slide="next" href="javascript:void(0)" class="right carousel-control">
                                    <span class="fa fa-chevron-right"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!--预约过的人 结束-->
                    <!--讲师 开始-->
                    <div class="mt20 pt10">
                        <section class="c-head-title">
                            <h6><span class="fs16 c-333">讲师</span></h6>
                            <hr>
                        </section>
                        <div class="carousel-inner" th:if="${course['teacherList']}==null">
                            <div class="item active bespeak-item">
                                        <span class="no-data__wrap">
                                            <span class="no-data-ico"></span>
                                            <p class="mt20"><span class="c-666">暂时没有讲师哦~~~</span></p>
                                        </span>
                            </div>
                        </div>
                        <div th:if="${course['teacherList']}!=null">

                            <section th:each="teacher,index: ${course['teacherList']}" th:if="${index['index']} < 4" class="clearfix mt20">
                                <div class="media">
                                    <div class="media-left">
                                        <a th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${teacher['id']})}">
                                            <img th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}" class="media-object img-circle lazy-user vam" width="56" height="56"/>
                                        </a>
                                    </div>
                                    <div class="media-body pl10">
                                        <h4 class="media-heading">
                                            <span class="fs16 c-333" th:text="${teacher['teacherName']}"></span>
                                        </h4>
                                        <span class="c-bbb fs12 pt5 show" th:if="${teacher['teacherType']}==1">平台自有</span>
                                        <span class="c-bbb fs12 pt5 show" th:if="${teacher['teacherType']}==2">入驻专家</span>
                                    </div>
                                    <div th:if="${teacher['isQuestion']}==1" class="media-right askQuestions" data-quiz >
                                        <a th:href="@{/web/uc/qa/initSaveQuestionView?type=2&teacherId={teacherId}(teacherId=${teacher['id']})}">
                                            <button   class="btn btn-sm btn-info btn-rounded btn-outline" type="button">向TA提问</button>
                                        </a>
                                    </div>
                                    <div class="mt20 wm-info-teacher-desc__wrap">
                                        <p class="fs12 c-999" th:utext="${teacher['depict']}"></p>
                                    </div>
                                </div>
                                <hr>
                            </section>
                        </div>
                    </div>

                    <div th:if="!${#lists.isEmpty(classes)}" class="mt20 pt10">
                        <section class="c-head-title">
                            <h6><span class="fs16 c-333">课程关联班级</span></h6>
                            <hr>
                        </section>
                        <div class="media">
                            <a th:each="class :${classes}" th:href=" @{/web/classes/info?id={id}(id=${class['id']})}" target="_blank">
                                <div class="media-left">
                                    <img th:attr="data-original=${class['imageMap']['pcUrlMap']['small']}" width="100" class="lazy">
                                </div>
                                <div class="media-body">
                                    <div class="sc-item-title">
                                        <span  th:text="${class['name']}" class="c-333 fs14"></span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<!--快捷登录 结构内容 开始-->
<textarea class="hide" id="loginFastEle__wrap">
        <div class="loginfase__wrap">
            <div class="mt20 pt10 mb20 pb10 ml20 mr20">
                <section class="c-info-tab text-center">
                    <h4 class=""><span class="fs18" style="color: #333">用户登录</span></h4>
                </section>
                <section class="mt20 pt10 pb10 mb20">
                    <div style="text-align: center;margin: 5px;display: none;">
                        <div class="c-danger">
                            <i class="fa fa-warning"></i>&nbsp;<span id="loginErrorTips"></span>
                        </div>
                    </div>
                    <div class="mr20 ml20">
                        <div class="input-group mb20"><span class="input-group-addon"><i class="fa fa-mobile-phone fs24 c-info"></i></span>
                            <input type="text" placeholder="请输入手机号/邮箱" class="form-control input-lg" data-username>
                        </div>
                        <div class="input-group mb20"><span class="input-group-addon"><i class="fa fa-unlock-alt fs18 c-info"></i></span>
                            <input type="password" placeholder="请输入登录密码" class="form-control input-lg" data-password>
                        </div>
                        <div class="hLh20">
                            <aside class="pull-right">
                                <a href="${userWebPath}/web/user/login" class="c-999">没有账号，去注册？</a>
                                <a href="${userWebPath}/web/user/retrievePassword" class="c-999 ml20">忘记密码 <i class="fa fa-question-circle"></i></a>
                            </aside>
                            <aside class="pull-left">
                                <label class="i-checks" data-toggle="tooltip" data-placement="top" data-original-title="公共场所不建议勾选">
                                    <input type="checkbox" checked class="vam" style="margin: 0" data-auto/> <span class="vam">自动登录</span>
                                </label>
                            </aside>
                        </div>
                        <div class="mt20 pt10">
                            <button type="button" id="loginBtn" class="btn btn-lg btn-block btn-info unRadius"> 登 录 </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </textarea>
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/web/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/common/shareFn.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/common/qrcode/qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/live/live-course-info.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-activity-code.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/favorites/course-favorites.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-buy-user.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/live/live-course-catalog.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-guideBuy.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/courseComment/course-comment.js?v={v}(path=${staticPath},v=${v})}"></script>
<script type="text/javascript" th:src="@{{path}/common/qrcode/jquery.qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
</body>
</html>